<template>
    <div class="student_work">
        <!-- 搜索栏 -->
        <div class="option">
            <el-card>
                <div class="option_content">
                    <div class="option_title" style="display: inline">
                        搜索条件 |
                    </div>
                    <div class="input-wrapper" style="display: inline">
                        <el-input v-model="flitItem.title" placeholder="请输入标题" clearable class="custom-input" />
                        <el-input v-model="flitItem.type" placeholder="请输入类型" clearable class="custom-input" />
                        <el-input v-model="flitItem.priceLow" placeholder="请输入价格下限" clearable class="custom-input" />
                        <el-input v-model="flitItem.priceHeight" placeholder="请输入价格上限" clearable class="custom-input" />
                        <el-button @click="resetForm">重置</el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 数据表格 -->
        <div class="job_table">
            <el-card>
                <el-table :data="tableData" :="{ height: tableHeight }" row-key="id" stripe @row-click="RowClick">
                    <el-table-column prop="id" label="ID" style="height: 200px" v-if="false"></el-table-column>
                    <el-table-column prop="title" label="标题" />
                    <el-table-column prop="jobType" label="类型" />
                    <el-table-column prop="salary" :formatter="formatPrice" label="价格" sortable />
                    <el-table-column prop="publishTime" :formatter="formatTablrDate" label="发布时间" />
                    <el-table-column label="操作">
                        <template #default="{ row }" v-slot="scope">
                            <el-button @click="receiveWork(row, $event)" size="small" type="primary">
                                接取
                            </el-button>
                            <el-button @click="GetComment(row.id,$event)" size="small" type="">
                                查看评论
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>

        <div class="job_deawer">
            <el-drawer v-model="isOpenDrawer" size="45%" title="详细信息" class="custom-drawer">
                <el-form :model="currentRowData" label-width="120px" class="form-container" status-icon>
                    <el-form-item id="publisher" label="发布人">
                        <el-input v-model="currentRowData.userName" :disabled="isEdit" placeholder="请输入内容" />
                    </el-form-item>
                    <el-form-item id="type" label="工作类型">
                        <el-input v-model="currentRowData.jobType" :disabled="isEdit" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="title" label="标题">
                        <el-input v-model="currentRowData.title" :disabled="isEdit" placeholder="请输入内容" />
                    </el-form-item>
                    <el-form-item id="detail" label="详情">
                        <el-input v-model="currentRowData.description" :disabled="isEdit" placeholder="请输入内容" />
                    </el-form-item>
                    <el-form-item id="maxPeople" label="人数">
                        <el-input v-model="currentRowData.maxPeople" :disabled="isEdit" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="price" label="价格">
                        <el-input v-model="currentRowData.salary" :disabled="isEdit" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="taker" label="接取人">
                        <el-input v-model="currentRowData.takersName" :disabled="isEdit" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="startTime" label="开始时间">
                        <el-input v-model="formatDrawerDate.formattedStartTime" :disabled="isEdit"
                            placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="endTime" label="结束时间">
                        <el-input v-model="formatDrawerDate.formattedEndTime" :disabled="isEdit"
                            placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="endTime" label="发布时间">
                        <el-input v-model="formatDrawerDate.formattedPublishTime" :disabled="isEdit"
                            placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="receiveWork()">
                            接取
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import useWork from "@/hooks/student/useWork";
import { onBeforeUnmount, onMounted, ref, getCurrentInstance, nextTick } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";

const router = useRouter();

const {
    tableData,
    flitItem,
    formatPrice,
    resetForm,
    formatTablrDate,
    RowClick,
    isOpenDrawer,
    currentRowData,
    formatDrawerDate,
    isEdit,
    // receiveBtn,
    getWorks,
    receiveWork
} = useWork();

const instance = getCurrentInstance();
const componentName = instance?.type?.name ?? '';

function GetComment(workId:number,$event?:any) {
    event?.stopPropagation();   
    router.push({ name: "Common",params:{workId} })
}


onMounted(() => {
    nextTick(() => {
        getWorks();
    })
})

// ==界面表格的动态高度===========================================================================

const tableHeight = ref(0);
const updateTableHeight = () => {
    // 计算动态高度，比如这里设置为窗口高度的 70%
    tableHeight.value = window.innerHeight - 300;
};
onMounted(() => {
    updateTableHeight(); // 页面加载时设置表格高度
    window.addEventListener("resize", updateTableHeight); // 监听窗口大小变化
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", updateTableHeight); // 清理事件监听器
});
</script>

<style scoped>
/* 表格样式====================================================================================== */
.job_table {
    position: relative;
    top: 18px;
}

/* 搜索栏样式 ================================================================================ */
.option_title {
    margin-top: 6px;
    margin-right: 15px;
    width: 6%;
    font-family: Verdana;
    /* 设置字体 */
}

.custom-button {
    width: 6%;
    /* 按钮宽度 */
    border-radius: 8px;
    /* 按钮圆角 */
    font-size: 14px;
    /* 按钮字体大小 */
    padding: 12px 20px;
    /* 按钮内边距 */
    margin-left: 50%;
    /* 将按钮居中 */

    /* 按钮的背景颜色和边框颜色 */
    background-color: white;
    /* 按钮背景为白色 */
    border: 1px solid #dcdcdc;
    /* 按钮浅灰色边框，调整边框为 1px */

    /* 按钮的阴影效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */

    /* 按钮文字颜色为灰色 */
    color: #888888;
    /* 设置字体颜色为灰色 */

    /* 鼠标悬停时效果 */
    transition: all 0.3s ease;
}

.custom-button:hover {
    background-color: #5dabf8;
    /* 悬浮时的背景色 */
    border-color: #56a9fc;
    /* 悬浮时的边框颜色 */
}

/* 按钮点击时的动态效果（使用 :active 伪类） */
.custom-button:active {
    transform: scale(0.95);
    /* 按钮点击时缩小 */
    background-color: #66b3ff;
    /* 按钮点击时的背景色 */
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
    /* 点击时的阴影 */
}

/* 自定义输入框样式 */
.custom-input {
    width: 10%;
    margin-right: 15px;
    /* 输入框之间的间距 */
    border-radius: 8px;
    /* 圆角 */
}

.el-input__inner {
    padding: 10px 15px;
    /* 调整内边距 */
    font-size: 14px;
    /* 设置字体大小 */

    border-radius: 8px;
    /* 圆角边框 */
    background-color: #f9f9f9;
    /* 背景颜色 */
}
</style>
